<template class="dashBoardChartB">
    <div id="mini-virbation"/>
</template>

<script setup>
// 官网 https://echarts.apache.org/examples/zh/editor.html?c=gauge-temperature
import {onMounted} from "vue";
import * as echarts from 'echarts';
import {reactive} from 'vue'

const setEchartWH = reactive({ //设置控制图表大小变量
    width: '400px',
    height: '400px'
});
onMounted(()=> {
    setEchartWH.width = '300px';
    setEchartWH.height = '250px';

    draw(setEchartWH);
})

function draw(setEchartWH){
    var chartDom = document.getElementById('mini-virbation');
    var myChart = echarts.init(chartDom,null,setEchartWH);
    var option;

    let base = +new Date(1988, 9, 3);
    let oneDay = 24 * 3600 * 1000;
    let data = [[base, Math.random() * 300]];
    for (let i = 1; i < 20000; i++) {
        let now = new Date((base += oneDay));
        data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
    }
    option = {
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        toolbox: {
            show: false,                      //关闭上面工具箱
            itemSize: 10,                    //设置工具箱的大小
            showTitle: false,                 //设置标题的显示状态
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {},

                color:'#ccc'
            }
        },
        xAxis: {
            type: 'time',
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 20,
            },
            {
                start: 0,
                end: 20,
                moveHandleSize: 7           //句柄滑动按钮的大小

            }
        ],
        series: [
            {
                name: 'Fake Data',
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {

                },
                data: data,

            }
        ]
    };

    option && myChart.setOption(option);
}
</script>

<style scoped>
.dashBoardChartB {
    width: 60%;
    text-align: center;
}

#main {
    width: 100%;
    height: 100%;
}
</style>
